<!--
 * @Author: lp
 * @Date: 2022-02-08 13:55:11
 * @LastEditTime: 2022-05-16 11:01:26
 * @LastEditors: lp 654528967@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: //nien-vue3-admin//src//components//customTable//index.vue
-->
<template>
  <el-table
    v-bind="options.event"
    :key="tableKey"
    ref="table"
    v-loading="loading"
    :data="data"
    border
  >
    <template v-if="Array.isArray(customTableOptions) && !customTableErr">
      <template
        v-for="item in customTableOptions"
        :key="item.id"
      >
        <el-table-column
          v-if="item.show"
          :formatter="options.columns[item.id].formatter"
          v-bind="{ showOverflowTooltip: true, ...options.columns[item.id] }"
          :data-label="options.columns[item.id].label"
        >
          <template v-if="typeof options.columns[item.id].render === 'function' || (options.columns[item.id].autoFormatter && !options.columns[item.id].formatter)" #default="scope">
            <CustomCell
              :render="options.columns[item.id].render"
              :index="scope.$index"
              :auto-formatter="options.columns[item.id].autoFormatter"
              :row="scope.row"
              :formatter="customFormatter"
            ></CustomCell>
          </template>
        </el-table-column>
      </template>
    </template>
    <template v-else>
      <template v-if="Array.isArray(options.columns)">
        <el-table-column
          v-for="{ render, autoFormatter, formatter, id: key, ...column } in options.columns"
          :key="key"
          :formatter="formatter"
          v-bind="{ showOverflowTooltip: true, ...column }"
        >
          <template v-if="typeof render === 'function' || (autoFormatter && !formatter)" #default="scop">
            <CustomCell
              :render="render"
              :index="scop.$index"
              :auto-formatter="autoFormatter"
              :row="scop.row"
              :formatter="customFormatter"
            ></CustomCell>
          </template>
        </el-table-column>
      </template>
    </template>
  </el-table>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue'
import localforage from 'localforage'
import { ElMessage } from 'element-plus'
import CustomCell from './CustomCell.vue'

export default defineComponent({
  components: {
    CustomCell,
  },
  props: {
    options: { default: () => ({}),
      type: Object },
    // eslint-disable-next-line vue/require-valid-default-prop
    data: { default: () => [],
      type: Object },
    loading: Boolean,
    customKey: { default: '',
      type: String },
    id: { default: null,
      type: Number },
    tableDbIsReady: Boolean,
  },
  setup(props) {
    const table = ref()
    const tableKey = ref(null)
    const updateTableKey = () => {
      tableKey.value = new Date().getTime()
    }
    updateTableKey()
    const customTableOptions = ref<Array<any>>([])
    const customTableErr = ref<boolean>(true)
    const reFreshTableFO = () => {
      if (props.customKey) {
        const indexDbName = `${ props.customKey }-table`
        localforage.getItem(indexDbName).then((res: [object]) => {
          if (res === null) {
            ElMessage.error('表格配置数据读取失败!')
            customTableErr.value = true
          } else {
            customTableOptions.value = res
            customTableErr.value = false
          }
          updateTableKey()
        })
      } else {
        customTableErr.value = true
      }
    }
    watchEffect(() => {
      if (props.tableDbIsReady) {
        reFreshTableFO()
      }
    })
    const customFormatter = (arr, dictLabel, dictValue, rowKey, row) => {
      const key = arr.findIndex((el) => el[dictValue] == row[rowKey])
      return key == -1 ? row[rowKey] : arr[key][dictLabel]
    }
    return {
      customTableOptions,
      reFreshTableFO,
      customFormatter,
      table,
      tableKey,
      customTableErr,
    }
  },
})
</script>
